<template>
  <div class="positionList">
    <div class="widthpage">
      <div class="crumbs">
        <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
          <a-breadcrumb separator=">">
            <a-breadcrumb-item href="" @click.native="$router.push('/')"
              >首页</a-breadcrumb-item
            >
            <a-breadcrumb-item
              href=""
              @click.native="$router.push('/employment/home')"
            >
              创业就业
            </a-breadcrumb-item>
            <a-breadcrumb-item style="color: #ffbe37"
              >招聘职位</a-breadcrumb-item
            >
          </a-breadcrumb>
        </div>
      </div>
      <div class="findInput">
        <a-input v-model="title" placeholder="请输入岗位名称" />
        <p class="fildbtn" @click="search()">
          <a-icon type="search" />
          搜索
        </p>
      </div>
      <div class="filter">
        <div class="workPack">
          <p>工作经验：</p>
          <p
            @click="changeworkindex('')"
            :class="workindex === '' ? 'industry' : ''"
          >
            全部
          </p>
          <p
            @click="changeworkindex(item.code)"
            :class="workindex === item.code ? 'industry' : ''"
            v-for="(item, index) in worktype"
            :key="index"
          >
            {{ item.name }}
          </p>
        </div>
        <div :class="flag ? 'workPack' : 'workPack hidden'">
          <p>公司行业：</p>
          <div>
            <p
              @click="changeindustryindex('')"
              :class="industryindex === '' ? 'industry' : ''"
            >
              全部
            </p>
            <p
              @click="changeindustryindex(item.code)"
              :class="industryindex === item.code ? 'industry' : ''"
              v-for="(item, index) in industryList"
              :key="index"
            >
              {{ item.name }}
            </p>
            <p class="func" v-show="industryList && industryList.length >= 9" @click="changeFlag">
              {{ flag ? "收起" : "展开"
              }}<a-icon v-show="!flag" type="caret-down" /><a-icon
                v-show="flag"
                type="caret-left"
              />
            </p>
          </div>
        </div>
        <div class="workPack">
          <p>残疾类型：</p>
          <p
            @click="changedisabilityIndex('')"
            :class="disabilityIndex === '' ? 'industry' : ''"
          >
            全部
          </p>
          <p
            @click="changedisabilityIndex(item.code)"
            v-for="(item, index) in disabilityList"
            :key="index"
            :class="disabilityIndex === item.code ? 'industry' : ''"
          >
            {{ item.name }}
          </p>
        </div>
      </div>
      <div class="sort">
        <div class="newsort" @click="changeSort('bastNew', 'basthot')">
          <p :class="bastNew ? 'tabActive' : ''">最新排序</p>
          <!-- <img
            v-show="!bastNew"
            src="@/assets/image/employment/nosort.png"
            alt=""
          />
          <img
            v-show="bastNew"
            src="@/assets/image/employment/topsort.png"
            alt=""
          /> -->
          <!-- <img src="@/assets/image/employment/bottomsort.png" alt=""> -->
        </div>
        <div class="hotsort" @click="changeSort('basthot', 'bastNew')">
          <p :class="basthot ? 'tabActive' : ''">热门排序</p>
          <!-- <img
            v-show="!basthot"
            src="@/assets/image/employment/nosort.png"
            alt=""
          />
          <img
            v-show="basthot"
            src="@/assets/image/employment/topsort.png"
            alt=""
          /> -->
          <!-- <img src="@/assets/image/employment/bottomsort.png" alt=""> -->
        </div>
      </div>
      <ul class="workList">
        <li v-for="(item, index) in morgeList" :key="index">
          <div
            class="workmsg"
            @click="
              $router.push('/employment/positionDetail?jobCode=' + item.jobCode)
            "
          >
            <p class="workTitle">{{ item.name }}</p>
            <div class="welfare">
              <p class="maney" v-show="item.payType == 1">
                {{ item.minPay }}<span v-show="item.minPay && item.maxPay">K-</span>{{ item.maxPay }}<span v-show="item.minPay && item.maxPay">K</span>/月
              </p>
              <p class="maney" v-show="item.payType == 2">
                {{ item.maxPay }}元/日
              </p>
              <p class="maney" v-show="item.payType == 3">面议</p>
              <p>{{ item.degree }}</p>
              <p class="fgx" v-show="item.degree">|</p>
              <p>{{ item.workExper }}</p>
              <p class="fgx" v-show="item.workExper">|</p>
              <p>{{ item.disaType }}</p>
            </div>
            <div class="navs" v-if="item.welfare">
              <p
                v-for="(i, j) in item.welfare.split('、')"
                v-show="j < 3"
                :key="j"
              >
                {{ i }}
              </p>
            </div>
          </div>
          <div
            v-if="item.comCode"
            class="gsmsg"
            @click="
              $router.push('/employment/detailsBusiness?id=' + item.comCode)
            "
          >
            <img
              :src="imageWebUrl + item.comLogo"
              @error="$event.target.src = GLOBAL.defaultIconImg"
              alt=""
            />
            <div class="msg">
              <p class="title">{{ item.comName }}</p>
              <p class="navs">
                {{ item.comNature }} <span v-show="item.comNature">|</span>
                {{ item.comTrade }} <span v-show="item.comTrade">|</span>
                {{ item.scale }}
              </p>
            </div>
          </div>
          <div
            class="relevantmsg"
            v-show="item.couseList.length || item.webName"
          >
            <div class="class" v-show="item.couseList.length">
              <p>相关课程：</p>
              <div class="classLink">
                <p
                  @click="getJumpVideo(items)"
                  v-for="(items, indexs) in item.couseList"
                  :key="indexs + 'dw'"
                >
                  {{ items.name }}
                </p>
              </div>
            </div>
            <div class="policy" v-show="item.webName">
              <p>
                相关政策：<span v-show="item.policies == 2">{{
                  item.webName
                }}</span
                ><a
                  :href="item.webUrl"
                  target="_blank"
                  v-show="item.policies == 1"
                  >{{ item.webName }}</a
                >
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <a-empty
      :image="imgUrl"
      :image-style="{
        height: '220px',
      }"
      style="margin: 48px auto"
      v-if="morgeList.length < 1 && listflag"
    />
    <Loading v-show="onLoading"></Loading>
    <div class="cnBottom" v-if="morgeList.length > 1">
      <div style="margin: 0 auto; width: 230px">
        <a-button @click="more()" v-show="btnState == 1" class="sobtn"
          >点击加载更多</a-button
        >
        <a-button v-show="btnState == 2" :loading="true" class="sobtn"
          >正在加载中</a-button
        >
        <span class="timeTxt1" v-if="btnState == 3">没有更多了</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "", //关键字
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      bastNew: true, //最新
      basthot: false, //热门
      flag: false,
      listflag: false,
      morgeList: [], // 职位列表
      // 分页
      total: 0,
      pageSize: 10,
      pageIndex: 1,
      disabilityList: [],
      worktype: [],
      industryList: [],
      disabilityIndex: "", // 残疾类别选中id
      workindex: "", // 工作经验选中id
      industryindex: "", // 公司行业选中id
      onLoading: false,
      // 点击加载状态
      btnState: 1,
    };
  },
  mounted() {
    this.getMorgeList();
    this.getworktype();
    this.getindustryList();
    this.getdisabilityList();
  },
  methods: {
    // 跳转视频播放页
    getJumpVideo(e) {
      this.$router.push(
        "/video/detailsVideo?courseNo=" +
          e.courseNo +
          "&learnedTime=" +
          e.learnedTime
      );
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.getMorgeList();
    },
    search() {
      this.morgeList = [];
      this.getMorgeList();
    },
    // 查询职位列表
    getMorgeList() {
      this.listflag = false;
      this.onLoading = true;
      let ber = [];
      this.$ajax({
        url: "/entrepreneurial/comjob/morgeList",
        method: "post",
        params: {
          workExper: this.workindex, //"string //经验要求",
          disaType: this.disabilityIndex, //"string //残疾类别",
          name: this.title, //"string //职位名称",
          orderType: this.bastNew ? 1 : 2, //"int //排序 1.按最新排序 2.按热度排序",
          jobTrade: this.industryindex, //"string //职位行业",
          pageSize: this.pageSize, //"int //分页开区间",
          pageIndex: this.pageIndex, //"int //分页闭区间"
        },
      }).then((res) => {
        this.listflag = true;
        if (res.code == 200) {
          this.onLoading = false;
          ber = res.data.list;
          for (var i in ber) {
            this.morgeList.push(ber[i]);
          }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
          this.total = res.data.totalCount;
        } else {
          this.onLoading = false;
        }
      });
    },
    changeSort(e, j) {
      this[e] = true;
      this[j] = false;
      this.morgeList = [];
      this.getMorgeList();
    },
    changeFlag() {
      this.flag = !this.flag;
    },
    // 查询分类-工作经验
    getworktype() {
      this.$ajax({
        url: "/news/code/list/name?codeType=3",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.worktype = res.data;
        }
      });
    },
    // 公司行业
    getindustryList() {
      this.$ajax({
        url:"/news/industry/list/job/tree",
      }).then((res) => {
        if (res.code == 200) {
          this.industryList = res.data;
        }
      });
    },
    // 残疾类别
    getdisabilityList() {
      this.$ajax({
        url: "/news/code/list/name?codeType=1",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.disabilityList = res.data;
        }
      });
    },
    // 筛选-切换公司行业
    changeindustryindex(e) {
      this.pageIndex=1;
      this.morgeList = [];
      this.industryindex = e;
      this.getMorgeList();
    },
    // 筛选-切换残疾类别
    changedisabilityIndex(e) {
      this.pageIndex=1;
      this.morgeList = [];
      this.disabilityIndex = e;
      this.getMorgeList();
    },
    // 筛选-切换工作经验
    changeworkindex(e) {
      this.pageIndex=1;
      this.morgeList = [];
      this.workindex = e;
      this.getMorgeList();
    },
  },
};
</script>

<style scoped lang="less">
.tabActive {
  color: #ffbe37;
}
.positionList {
  background-color: #f8f8f8;
  // padding-top: 150px;
  .widthpage {
    width: 1200px;
    margin: 0 auto;
  }
  .crumbs {
    height: 57px;
    line-height: 57px;
  }
  .findInput {
    width: 450px;
    height: 44px;
    border: 1px solid #999999;
    border-right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    input {
      border: 0;
      background-color: #f8f8f8;
      padding-left: 16px;
      ::-webkit-input-placeholder {
        color: #999999;
      } /* 使用webkit内核的浏览器 */
      :-moz-placeholder {
        color: #999999;
      } /* Firefox版本4-18 */
      ::-moz-placeholder {
        color: #999999;
      } /* Firefox版本19+ */
      :-ms-input-placeholder {
        color: #999999;
      } /* IE浏览器 */
    }
    .ant-input {
      outline: none;
      box-shadow: none;
    }
    .fildbtn {
      width: 88px;
      height: 44px;
      background-color: #ffbe37;
      text-align: center;
      line-height: 44px;
      cursor: pointer;
      color: #333333;
      font-size: 15px;
    }
  }
  .filter {
    .hidden {
      height: 37px;
      overflow: hidden;
    }
    .workPack {
      margin-bottom: 10px;
      display: flex;
      flex-wrap: wrap;
      div {
        height: 100%;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        .func {
          cursor: pointer;
          position: absolute;
          right: 0px;
          top: 0px;
          margin: 0;
          color: #ffbe37;
        }
        p:first-child {
          margin-right: 50px;
          font-weight: 400;
          cursor: pointer;
        }
      }
      p {
        margin-right: 50px;
        color: #666666;
        font-size: 16px;
        line-height: 22px;
        cursor: pointer;
        margin-bottom: 15px;
      }
      p:first-child {
        margin-right: 24px;
        font-weight: bold;
        cursor: default;
      }
      .industry {
        color: #ffbe37;
        font-weight: bold !important;
      }
    }
  }
  .sort {
    width: 1200px;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background-color: #ffffff;
    margin-top: 30px;
    .newsort,
    .hotsort {
      margin-right: 40px;
      display: flex;
      cursor: pointer;
      p {
        margin-right: 8px;
      }
      img {
        width: 8px;
      }
    }
  }
  .workList {
    margin-top: 20px;
    li {
      cursor: pointer;
      background-color: #ffffff;
      display: flex;
      padding: 30px 20px;
      align-items: center;
      margin-bottom: 20px;
      .workmsg {
        width: 449px;
        .workTitle {
          color: #333333;
          font-size: 18px;
          line-height: 25px;
          font-weight: bold;
        }
        .welfare {
          display: flex;
          align-items: center;
          margin-top: 16px;
          .maney {
            color: #ffbe37;
            font-size: 18px;
            line-height: 25px;
            margin-right: 24px;
          }
          P {
            color: #666666;
            font-size: 14px;
            line-height: 17px;
          }
          .fgx {
            margin: 0 10px;
          }
        }
        .navs {
          display: flex;
          margin-top: 15px;
          p {
            padding: 0 15px;
            border-radius: 4px;
            border: 1px solid #ffbe37;
            line-height: 24px;
            margin-right: 16px;
            font-size: 12px;
            color: #ffbe37;
          }
        }
      }
      .gsmsg {
        width: 337px;
        height: 106px;
        display: flex;
        padding-top: 55px;
        img {
          margin-top: -5px;
          width: 60px;
          height: 60px;
        }
        .msg {
          flex: 1;
          padding-left: 19px;
          padding-right: 19px;
          .title {
            color: #000000;
            font-size: 14px;
            line-height: 18px;
          }
          .navs {
            margin-top: 16px;
            color: #999999;
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
      .relevantmsg {
        height: 78px;
        padding-left: 40px;
        margin-top: 31px;
        border-left: 2px solid #eeeeee;
        .class {
          display: flex;
          p {
            color: #333333;
            font-size: 14px;
            line-height: 26px;
          }
          .classLink {
            p {
              color: #0d4fae;
              text-decoration: underline;
            }
          }
        }
        .policy {
          margin-top: 8px;
          color: #000000;
          font-size: 14px;
          line-height: 17px;
          span {
            color: #000000;
          }
          a {
            color: #0d4fae;
          }
        }
      }
    }
  }
}
</style>
